<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <title>超市库存管理系统</title>
    <!-- 引入 Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <!-- 引入 Font Awesome CSS 用于添加图标，移除 integrity 属性 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"/>
    <style>
        /* 整体页面样式，以天蓝色调为主，调整颜色和字体等 */
        body {
            font-family: 'Arial', sans-serif;
            background-color: #e3f2fd; /* 天蓝色背景 */
            color: #333;
        }

        /* 头部样式，使用 Bootstrap 类和自定义样式，增加一些阴影和圆角效果 */
        header {
            background-color: #2196F3; /* 深蓝色头部 */
            color: white;
            text-align: center;
            padding: 30px;
            font-size: 30px;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        /* 导航栏样式，使用 Bootstrap 的 navbar 组件，并进行一些自定义调整 */
        nav.navbar {
            background-color: #1976D2; /* 稍深的蓝色导航栏 */
            padding: 1rem 0;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        nav.navbar a.nav-link {
            color: white;
            transition: background-color 0.3s ease;
            border-radius: 5px;
            margin: 0 10px;
            padding: 10px 20px;
        }

        nav.navbar a.nav-link:hover {
            background-color: #1565C0; /* 鼠标悬停时的颜色 */
        }

        /* 主体内容区域样式，使用 Bootstrap 的 card 组件，添加圆角和阴影效果 */
        section {
            padding: 30px;
            margin: 30px;
            background-color: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }

        /* 页脚样式，使用 Bootstrap 的 footer 组件，添加一些内边距和背景色调整 */
        footer {
            background-color: #1976D2; /* 与导航栏颜色一致 */
            color: white;
            text-align: center;
            padding: 20px;
            position: fixed;
            bottom: 0;
            width: 100%;
        }

        /* 优化卡片样式，添加更多间距和阴影效果 */
        .card {
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
            border: none;
            border-radius: 15px;
            margin-bottom: 30px;
        }

        /* 优化主体内容区域内边距 */
        .card-body {
            padding: 40px;
        }

        /* 优化导航栏图标和文字的间距 */
        .nav-item i {
            margin-right: 10px;
        }

        /* 优化头部样式，添加一些细节 */
        .jumbotron {
            border-radius: 0;
            background-image: linear-gradient(to right, #2196F3, #1976D2); /* 头部渐变背景 */
        }

        /* 为表格预留位置的样式，去掉滚动条，可根据需要修改或添加内容 */
        .table-placeholder {
            height: auto; /* 高度自动，根据内容调整 */
            border: 1px solid #ddd;
            border-radius: 10px;
            padding: 20px;
        }
    </style>
</head>

<body>
<!-- 头部，使用 Bootstrap 的 jumbotron 组件 -->
<header class="jumbotron">
    <h1 class="display-4">超市库存管理系统</h1>
</header>

<!-- 导航栏，使用 Bootstrap 的 navbar 组件 -->
<nav class="navbar navbar-expand-lg navbar-dark">
    <div class="container">
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav mx-auto">
                <li class="nav-item">
                    <a class="nav-link" href="person.action?action=list"><i class="fas fa-users"></i> 员工管理</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="good.action?action=list"><i class="fas fa-boxes"></i> 商品管理</a>
                </li>
                <li class="nav-item">
                    <a class="nav-item nav-link" href="supplier.action?action=list"><i class="fas fa-truck"></i>
                        供应商和商品种类管理</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="saleBill.action?action=list"><i class="fas fa-receipt"></i> 销售管理</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/goodsSelect"><i class="fas fa-search"></i> 库存查询</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="optionRecord.action?action=list"><i class="fas fa-cog"></i> 日志</a>
                </li>
                <%-- 添加退出登录链接，点击后跳转到登录页面（假设登录页面是 login.jsp），并清除会话信息 --%>
                <li class="nav-item">
                    <a class="nav-link" href="login.jsp" onclick="return confirm('确认要退出登录吗？');">
                        <i class="fas fa-sign-out-alt"></i> 退出登录
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- 主体内容区域，使用 Bootstrap 的 card 组件 -->
<section class="card">
    <div class="card-body">
        <div class="table-placeholder">
            <jsp:include page="${mainRight==null? 'blank.jsp':mainRight}"></jsp:include>
        </div>
    </div>
</section>

<!-- 页脚，使用 Bootstrap 的 footer 组件 -->
<footer class="footer">
    <div class="container">
        Copyright &copy; 2024 超市库存管理系统版权所有
    </div>
</footer>

<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- 引入 Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>